<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>Animation eines Pendels mit Canvas</title>
		<script type="text/javascript" src="d3.v3.min.js"></script>
		<style type="text/css">
			.axis path, .axis line {
				fill: none;
				stroke: black;
				shape-rendering: crispEdges;
			}

			.axis text {
				font-family: sans-serif;
				font-size: 11px;
			}
		</style>
		<script type="text/javascript">
			var fps = 40;
			var interval = 1000 / fps;
			var t = 0;
			var dt = 0.2;
			var phi;
			var phi_0 = 0.2 * Math.PI;
			var g = 9.81;
			var l = 200;
			var omega_0 = Math.sqrt(g / l);
			var dot_phi_0 = 0;
			var myCircle = {
				x : 250,
				y : 200,
				radius : 20,
				startAngle : 0,
				stopAngle : 2 * Math.PI,
				clcwse : false
			};
			var myLine = {
				x2 : 250,
				y2 : 200
			}
			function initial() {
				document.getElementById("eingabe").onclick = animate;

				canvas = document.getElementById('myCanvas');
				context = canvas.getContext('2d');
				drawCircle(myCircle, context);
				drawLine(myLine, context)
				var lineData = []
				for (var j = 0; j < 200; ++j) {
					var data_i = {
						x : t,
						y : phi_0 * Math.cos(omega_0 * t) + (dot_phi_0 / omega_0) * Math.sin(omega_0 * t)
					};
					lineData.push(data_i);
					t += dt;
				}

				var w = 500;
				var h = 250;
				var padding = 30;
				var xScale = d3.scale.linear().domain([0, d3.max(lineData, function(d) {
					return d.x;
				})]).range([padding, w - padding]);
				var yScale = d3.scale.linear().domain([d3.min(lineData, function(d) {
					return d.y;
				}), d3.max(lineData, function(d) {
					return d.y;
				})]).range([h - padding, padding]);
				//This is the accessor function we talked about above
				var lineFunction = d3.svg.line().x(function(d) {
					return xScale(d.x);
				}).y(function(d) {
					return yScale(d.y);
				}).interpolate("linear");

				//The SVG Container
				var svg = d3.select("body").append("svg").attr("width", w).attr("height", h);

				//The line SVG Path we draw
				var lineGraph = svg.append("path").attr("d", lineFunction(lineData)).attr("stroke", "blue").attr("stroke-width", 2).attr("fill", "none");
				var xAxis = d3.svg.axis().scale(xScale).orient("bottom");
				//Define Y axis
				var yAxis = d3.svg.axis().scale(yScale).orient("left").ticks(5);
				//Create X axis
				svg.append("g").attr("class", "axis").attr("transform", "translate(0," + (h - padding) + ")").call(xAxis);
				//Create Y axis
				svg.append("g").attr("class", "axis").attr("transform", "translate(" + padding + ",0)").call(yAxis);

			}( function() {
					var lastTime = 0;
					var vendors = ['ms', 'moz', 'webkit', 'o'];
					for (var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
						window.requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame'];
						window.cancelAnimationFrame = window[vendors[x] + 'CancelAnimationFrame'] || window[vendors[x] + 'CancelRequestAnimationFrame'];
					}

					if (!window.requestAnimationFrame)
						window.requestAnimationFrame = function(callback, element) {
							var currTime = new Date().getTime();
							var timeToCall = Math.max(0, 16 - (currTime - lastTime));
							var id = window.setTimeout(function() {
								callback(currTime + timeToCall);
							}, timeToCall);
							lastTime = currTime + timeToCall;
							return id;
						};

					if (!window.cancelAnimationFrame)
						window.cancelAnimationFrame = function(id) {
							clearTimeout(id);
						};
				}());

			function drawCircle(myCircle, context) {
				context.beginPath();
				context.arc(myCircle.x, myCircle.y, myCircle.radius, myCircle.startAngle, myCircle.stopAngle, myCircle.clcwse);
				context.fillStyle = 'green';
				context.fill();
				context.lineWidth = 5;
				context.strokeStyle = '#003300';
				context.stroke();
			}

			function drawLine(myLine, context) {
				context.beginPath();
				context.moveTo(250, 0);
				context.lineTo(myLine.x2, myLine.y2);
				context.strokeStyle = '#ff0000';
				context.stroke();
			}

			function animate() {
				setTimeout(function() {
					window.requestAnimationFrame(animate);

					t += dt;
					phi = phi_0 * Math.cos(omega_0 * t) + (dot_phi_0 / omega_0) * Math.sin(omega_0 * t);
					myCircle.y = l * Math.cos(phi);
					myCircle.x = l * Math.sin(phi) + 250;
					myLine.x2 = l * Math.sin(phi) + 250;
					myLine.y2 = l * Math.cos(phi);
					// clear
					context.clearRect(0, 0, canvas.width, canvas.height);
					drawCircle(myCircle, context);
					drawLine(myLine, context)
				}, interval);
			}
		</script>
	</head>

	<body onload="initial()">
		<form id = "f1">
			<input type="button" id="eingabe" value="Animation!">
		</form>
		<canvas id="myCanvas" width="500" height="250">

		</canvas>
	</body>
</html>